<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/xiangqingye.css">
    <script src='js/vue.js'></script>
    <script src="js/axios.js"></script>
    <title>详情页</title>
</head>

<body>
<header class="mui-bar mui-bar-nav heads">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title xq_font">详情</h1>
</header>
<main>
    <div id='app'>
        <div class="mui-content main">
            <!-- 整体布局居中 -->
            <div class="outside">
                <img :src="random.image1" ref="imgSrc" class='tp'>
                <img :src="random.image2" ref="imgSrc" class='tp'>
                <!--收藏与保存名片  -->
                <div class='shoucang'>
                    <div class='flex1' @click="save" >
                        <a :href="random.image1" download="random.image1" id="img"></a>
                        <a :href="random.image2" download="random.image2" id="imgs"></a>
                        <img src="images/icon_baocun.png" class='sc'>
                        <span>保存名片</span>
                    </div>
                    <div class='flex2'>
                        <img v-if="random.collected == false" src="images/index_shoucang.png" class="sc"/>
                        <img v-if="random.collected == true" src="images/icon_shoucang.png" class='sc'>
                        <span @click="collect(random.id)">收藏名片</span>
                    </div>
                </div>
            </div>
            <div class='yinying'></div>
            <!-- 联系电话 -->
            <div class='tanxing'>
                <!-- 图片与字体 -->
                <div class='tel' @click="phone(random.phone)">
                    <img src="images/icon_phone2.png" class='phone'>
                    <span class='telephone'>拨打电话</span>
                </div>
                <!-- 电话号码 -->
                <span>
                    {{random.phone}}
                </span>
            </div>
        </div>
    </div>
</main>
<footer>
</footer>
<script src="js/mui.min.js"></script>
<script>
    const API_PROXY = 'https://bird.ioliu.cn/v1/?url='
    new Vue({
        el: '#app',
        data: {
            random: '',
            flag: '',
            imgSrc:''
        },
        created() {
            this.invite()
        },
        methods: {
            //往后台传值
            getIntro() {
                axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/cardInfo',`cardId=${this.flag}`)
                    .then(res => {
                        this.random = res.data.data;
                    })
            },
            //收藏图片
            collect(id) {
                if (this.random.collected == false) {
                    axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/collect',`cardId=${id}`)
                        .then(res=>{
                            console.log(res.data.code);
                            if (res.data.code == 0){
                                this.random.collected = !this.random.collected;
                                mui.toast(res.data.msg)
                            }else{
                                mui.toast(res.data.msg)
                            }
                        })
                }else{
                    axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/unCollect',`cardId=${id}`)
                        .then(res=>{
                            console.log(res.data.code);
                            if (res.data.code == 0){
                                this.random.collected = !this.random.collected;
                                mui.toast(res.data.msg)
                            }else{
                                mui.toast(res.data.msg)
                            }
                        })
                }
            },
            //保存图片
            save(){
                document.getElementById('img').click();
            },
            // 获取URL传值
            invite() {
                function getQueryString(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]);
                    return null;
                }
                this.flag = getQueryString("id");
                this.getIntro();
                this.card();
            },
            //点击跳转到拨号页面
            phone(phone){
                location.href="tel:"+phone;
            },
            //浏览量加一
            card(){
                axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/browseNum',`cardId=${this.flag}`)
                    .then(res=>{
                        if (res.data.code == 0){
                            console.log("浏览量加一")
                        }
                    })
            }
        }
    })
</script>
</body>

</html>
